<template>
  <div class="home">
    <!-- <right-nav></right-nav> -->
    <div class="block-1">
      <div class="main-layer" id="body-start">
        <div class="div-1">
          <div class="rili" v-show="systemTime && Object.keys(systemTime).length">
            <div class="nongli">{{ systemTime.ncWeek }}•{{ systemTime.monthCn }}{{ systemTime.dayCn }}</div>
            <div class="now">{{ `${systemTime.cYear}年${systemTime.cMonth}月${systemTime.cDay}日` }}</div>
          </div>

          <div class="gonggao">
            <router-link v-for="(item, idx) in noticeSource" :key="idx" :to="{ name: 'NoticeDetail', query: { noticeId: item.noticeId } }" :title="item.noticeTitle">
              [{{ $moment(item.createTime).format("YYYY-MM-DD") }}]&nbsp;{{ item.noticeTitle }}
            </router-link>
          </div>

          <div class="user">
            <div>
              <div class="name-level">
                <span class="name">{{ currentUser.nickName }}</span>
              </div>
              <div>员工编号: {{ currentUser.userNo }}</div>
              <div>手机号: {{ currentUser.phonenumber }}</div>
            </div>
          </div>
        </div>

        <div class="div-2">
          <my-app></my-app>
          <my-work></my-work>
        </div>
      </div>
    </div>

    <div class="block-2 main-layer">
      <img src="~@/assets/images/test/1.png" alt="" />
    </div>

    <div class="block-3">
      <div class="main-layer">
        <div class="div-3">
          <c-service></c-service>
          <c-tools-doc></c-tools-doc>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import Base from "@/controllers/base.ts";
import { Component } from "vue-property-decorator";
import MyApp from "./components/myApp.vue";
import MyWork from "./components/myWork.vue";
import CService from "./components/cService/index.vue";
import cToolsDoc from "./components/cToolsDoc/index.vue";
import RightNav from "./components/rightNav/index.vue";
import solarLunar from "solarlunar";

@Component({
  name: "Home",
  components: {
    MyApp,
    MyWork,
    CService,
    cToolsDoc,
    RightNav
  }
})
export default class Home extends Base {
  private noticeSource: any[] = [];
  private systemTime: any = {};

  private created() {
    // console.log(solarLunar.solar2lunar(2021, 1, 28));
    this.getSystemTime();
    this.getNoticeList();
  }

  private async getNoticeList() {
    const res = await this.$api.NoticeList({
      pageNum: 1,
      pageSize: 3
    });
    if (res && res.code === 200) {
      this.noticeSource = res.rows;
    }
  }

  private async getSystemTime() {
    const res = await this.$api.SystemTime();
    if (res && res.code === 200) {
      const date = new Date(res.data);
      this.systemTime = solarLunar.solar2lunar(date.getFullYear(), date.getMonth() + 1, date.getDate());
    }
  }
}
</script>

<style lang="less" scoped>
@import "~@/assets/style/mixin.less";
.home {
  .block-1 {
    background: linear-gradient(180deg, #f1f8ff 0%, #ffffff 66%);
    overflow: hidden;
    padding: 20px 0;
    border-bottom: 1px solid #dbe3f0;
  }
  .div-1 {
    display: flex;
    justify-content: space-between;
    background: #ffffff;
    box-shadow: 0px 0px 10px 0px rgba(83, 112, 239, 0.22);

    // padding-bottom: 10px;
    padding-left: 5px;
    .scale(height, 106px);
  }

  .rili {
    flex-shrink: 0;
    .scale(width, 209px);
    background: url("~@/assets/images/bg-0.png") center center no-repeat;
    background-size: cover;
    display: flex;
    flex-direction: column;
    margin-bottom: 10px;
    .scale(padding-right, 8px);

    .nongli {
      .scale(line-height, 50px);
      .scale(height, 41px);
      .scale(margin-top, 3px);
      text-align: center;
      color: white;
    }

    .now {
      font-size: 18px;
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #193654;
      text-shadow: 2px 2px 2px #ccc;
    }
  }

  .user {
    flex-shrink: 0;
    color: #171725;
    .scale(width, 333px);
    background: url("~@/assets/images/bg-1.png") left center no-repeat;
    .scale(padding-right, 16px);
    background-size: cover;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    letter-spacing: -0.5px;

    .name-level {
      display: flex;
      align-items: center;
    }

    .name {
      font-weight: bold;
      margin-right: 6px;
    }
  }

  .gonggao {
    overflow: hidden;
    display: flex;
    flex-direction: column;
    flex: 1;
    justify-content: space-around;
    padding: 6px 0px;

    & > a {
      width: 100%;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
      .scale(padding-left, 38px);
      background: url("~@/assets/images/bg-2.png") no-repeat;
      .scale(background-position-x, 20px);
      background-position-y: center;
      background-size: auto 60%;

      &:hover {
        background-image: url("~@/assets/images/bg-3.png");
      }
    }
  }

  .div-2 {
    display: flex;
    justify-content: space-between;
    .scale(margin-top, 20px);
    .scale(height, 349px);
  }

  .block-2 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .block-2 img {
    margin-top: 20px;
    max-width: 100%;
  }

  .div-3 {
    display: flex;
    justify-content: space-between;
    .scale(margin-top, 20px);
  }
}
</style>
